<template>
    <el-card shadow="always">
        <el-pagination :current-page="page" :page-size="pageSize"
            :page-sizes="[20, 40, 60, 80, 100]" size="small"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>
</template>

<script setup lang="ts" name="Pagination">
import { defineEmits } from 'vue';
defineProps({
    total: {
        type: Number,
        default: 0
    },

    page: {
        type: Number,
        default: 1
    },

    pageSize: {
        type: Number,
        default: 20
    }
});

const emit = defineEmits(['pageChange']);

const handleSizeChange = (val: number) => {
    emit('pageChange', val, 'sizeChange');
}

const handleCurrentChange = (val: number) => {
    emit('pageChange', val, 'currentChange');
}


</script>

<style scoped>
.el-card {
    margin: 0 auto;
    text-align: center
}
</style>